<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>表格表单</title>

<style >

.title {
font-size: 30px;
background: darkgray;
}

h1 {
 color: blue;
}

/*-----清空表格样式-----*/
th,td{
  padding: 0;
  min-width: 120px;
}



table{
  border-collapse:collapse; /*单元格间的边界合并*/
}

</style>

</head>

<body>

<!-- 基本表格 -->
<h1>基本表格</h1>

<!-- table的border如果在css里面设置,仅仅是四条边,并非灭个单元格都有线 -->
<table border="1">


  <!--
  合并单元格使用rowspan和colspan;
  rowspan和colspan只在 thead 和 tbody内有效;
 -->


<!-- 表格头 -->
<thead>
<tr>
<th></th>
  <th>星期一</th>
  <th>星期三</th>
  <th>星期五</th>
</tr>
</thead>


<!-- 表格内容 -->
<tbody>
<tr>
  <td rowspan="3">课程安排</th>
  <td>早餐</td>
  <td>西餐</td>
  <td>中餐</td>
</tr>
<tr>
  <td>早餐</td>
  <td>西餐</td>
  <td>中餐</td>
</tr>
<tr>
  <td>早餐</td>
  <td>西餐</td>
  <td>中餐</td>
</tr>
</tbody>

</table>


<hr>





</body>
</html>
